<template>
  <div class="RuleBtn">
    <div class="delbtn" :style="disable ? 'cursor: no-drop;' : ''" @click="del()" v-if="isDel">
      <img class="image" src="~@/assets/cut.png" alt="" />
      <span class="text" style="">删除规则</span>
    </div>
    <div class="addbtn" :style="disable ? 'cursor: no-drop;' : ''" style="" @click="add()" v-if="isAdd">
      <img class="image" src="~@/assets/plus.png" alt="" />
      <span class="text">添加规则</span>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    isAdd: {
      type: Boolean,
      default: true
    },
    isDel: {
      type: Boolean,
      default: true
    },
    disable: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    del() {
      if (this.disable) return
      this.$emit('del')
    },
    add() {
      if (this.disable) return
      this.$emit('add')
    }
  }
}
</script>
<style lang="less" scoped>
.RuleBtn {
  width: 100%;
  height: 20px;
  margin-top: 3px;
  padding-left: 110px;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
  .delbtn {
    cursor: pointer;
    margin-right: 20px;
    .image {
      width: 20px;
      margin-top: -3px;
    }
    .text {
      color: #cdcdcd;
      font-size: 14px;
    }
  }
  .addbtn {
    cursor: pointer;
    .image {
      width: 20px;
      margin-top: -3px;
    }
    .text {
      color: #cdcdcd;
      font-size: 14px;
    }
  }
}
</style>
